
<template>
    <div>
        <Row class="ef-tooltar" type="flex" style="background:#ffffff">
            <Cell width="2">
                <a class="iconfont iconplus-circle" @click="add">&nbsp;&nbsp;</a>
                <a class="iconfont icondatabase" @click="dbsource">&nbsp;&nbsp;</a>
                <a class="iconfont iconcloud" @click="nacosConfig">&nbsp;&nbsp;</a>
                <a class="iconfont iconcloud-server" @click="nacosService">&nbsp;&nbsp;</a>
                <a class="iconfont iconkey" @click="signKeys">&nbsp;&nbsp;</a>
            </Cell>
            <Cell width="6" style="padding-top:4px;">
                <Search @search="search" v-model="searchValue" v-width="240" showSearchButton><i
                        class="h-icon-search"></i></Search>
            </Cell>
        </Row>
        <div style="padding:10px;">
            <div style="background:#ffffff;">
                <Tabs :datas="param" :value="selected" class-name="h-tabs-card" @change="change"></Tabs>
            </div>
            <Row :space="10" style="margin-top:10px;">
                <Cell v-for="(item, i) in data" :key="i" width="6">
                    <div class="h-panel">
                        <div class="h-panel-bar">
                            <span><b>{{  item.name  }}</b></span>
                            <span class="h-panel-right">
                                <i class="h-split"></i>
                                <a @click="edit(item)">更新</a>
                                <i class="h-split"></i>
                                <a @click="test(item)">报文</a>
                                <i class="h-split"></i>
                                <Poptip content="确认删除?" @confirm="del(item)">
                                    <a>删除</a>
                                </Poptip>
                                <i class="h-split"></i>
                                <a @click="log(item)">日志</a>
                            </span>
                        </div>
                        <div class="h-panel-body">
                            <Row :space="10">
                                <Cell width="16">
                                    <span class="blue-color">唯一标识：</span><span>{{  item.id  }}</span>
                                </Cell>
                                <Cell width="8">
                                    <span class="blue-color">流程状态：</span>
                                    <h-switch v-model="item.flowState" trueValue="1" falseValue="0" :small="true"
                                        @change="stateChange(item.id, item.flowState)">
                                        <span slot="open">启动</span>
                                        <span slot="close">停用</span>
                                    </h-switch>
                                </Cell>
                            </Row>
                            <Row :space="10">
                                <Cell width="16">
                                    <span class="blue-color">流程名称：</span><span>{{  item.name  }}</span>
                                </Cell>
                                <Cell width="8">
                                    <span class="blue-color">流程类型：</span><span>{{  item.flowType  }}</span>
                                </Cell>
                            </Row>
                            <Row :space="10">
                                <Cell>
                                    <span class="blue-color">流程说明：</span><span>{{  item.remark  }}</span>
                                </Cell>
                            </Row>
                        </div>
                    </div>
                </Cell>
            </Row>
        </div>
        <Modal v-model="opened" v-bind="params">
            <div slot="header">{{  name  }}</div>
            <div>
                <Form ref="form" :model="model">
                    <FormItem label="流程类型">
                        <Select :value="model.flowType = selected" :datas="flowType"
                            :disabled="action == 'add'"></Select>
                    </FormItem>
                    <FormItem label="唯一标准">
                        <input type="text" v-model="model.id" :readonly="action != 'add'" />
                    </FormItem>
                    <FormItem label="流程名称">
                        <input type="text" v-model="model.name" />
                    </FormItem>
                    <FormItem label="流程说明">
                        <input type="text" v-model="model.remark" />
                    </FormItem>
                    <FormItem label="流程状态">
                        <h-switch v-model="model.flowState" trueValue="1" falseValue="0">
                            <span slot="open">启动</span>
                            <span slot="close">停用</span>
                        </h-switch>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <button class="h-btn" @click="opened = false">取消</button>
                <button class="h-btn h-btn-primary" @click="next">下一步</button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    mounted() {
        this.search();
    },
    computed: {
        selected() {
            return this.$store.state.config.selected;
        },
    },
    data() {
        return {
            data: [],
            param: {
                HTTP: "HTTP服务",
                TIMED: "定时任务",
                TCP_SERVER: "TCP/IP",
            },
            model: {
                id: "",
                name: "",
                remark: "",
                flowType: "",
            },
            opened: false,
            params: {
                hasMask: false,
                closeOnMask: true,
                hasDivider: true,
            },
            action: "",
            name: "新增",
            searchValue: "",
            flowType: [
                { keyId: "HTTP", title: "HTTP服务" },
                { keyId: "TIMED", title: "定时任务" },
                { keyId: "TCP_SERVER", title: "TCP服务" },
            ],
        };
    },
    methods: {
        search() {
            this.$axios
                .put("/cfflows", { name: this.searchValue, flowType: this.selected })
                .then((res) => {
                    this.data = res.data;
                });
        },
        add() {
            this.model = {};
            this.name = "新增";
            this.action = "add";
            this.opened = true;
        },
        edit(data) {
            this.name = data.name;
            this.action = "edit";
            this.$axios.get("/cfflows/" + data.id).then((res) => {
                this.model = res.data;
            });
            this.opened = true;
        },
        next() {
            if (this.action == "add") {
                this.addOk();
            } else if (this.action == "edit") {
                this.editOk();
            }
        },
        addOk() {
            let data = this.model;
            this.$axios.post("/cfflows", data).then((res) => {
                if (res.data.code == "0000") {
                    this.$router.push({
                        path: "/flow",
                        query: {
                            id: this.model.id,
                        },
                    });
                    this.opened = false;
                } else {
                    this.$Message.error(res.data.msg);
                }
            });
        },
        editOk(flowData) {
            let data = this.model;
            data.flowData = JSON.stringify(flowData);
            this.$axios.put("/cfflows/edit", data).then((res) => {
                if (res.data.code == "0000") {
                    this.$router.push({
                        path: "/flow",
                        query: {
                            id: this.model.id,
                        },
                    });
                    this.opened = false;
                } else {
                    this.$Message.error(res.data.msg);
                }
            });
        },
        del(data) {
            this.$axios.delete("/cfflows/" + data.id).then((res) => {
                if (res.data.code == "0000") {
                    this.search();
                    this.$Message.success(res.data.msg);
                } else {
                    this.$Message.error(res.data.msg);
                }
            });
        },
        dbsource() {
            this.$router.push({
                path: "/cfdatasources",
            });
        },
        nacosConfig() {
            this.$router.push({
                path: "/nacosconfigs",
            });
        },
        nacosService() {
            this.$router.push({
                path: "/nacosservices",
            });
        },
        signKeys() {
            this.$router.push({
                path: "/signkeys",
            });
        },
        test(data) {
            let text = {};
            let flowData = JSON.parse(data.flowData);
            flowData.nodeList[0].params.forEach((item) => {
                text[item.keyName] = item.name;
            });
            this.$Clipboard({
                text: JSON.stringify(text),
            });
        },
        log(data) {
            this.$Message.info("功能待开发中...");
        },
        change(data) {
            this.$store.commit("config/setSelected", data.keyId);
            this.search();
        },
        stateChange(id, state) {
            this.$axios
                .put("/cfflows/edit", { id: id, flowState: state })
                .then((res) => {
                    if (res.data.code == "0000") {
                        this.$Message.success(res.data.msg);
                    } else {
                        this.$Message.error(res.data.msg);
                    }
                });
        },
    },
};
</script>